<template>
  <div class="form_box">
    <avue-form :option="option" v-model="crudData.form" @submit="handleSubmit">
    </avue-form>
  </div>
</template>
<script setup>
import {areaCodeSave, htAreaCodeList, moneyList, moneySp} from "@/api/user/vip.js";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";

let props = defineProps({
  content: {
    type: Object,
    default: () => [],
    required: true
  }
})
const crudData = reactive({
  form: {},
  nowData: {},
})
const option = reactive({
  // labelWidth: 200,
  // size: 'medium',
  // index: false,
  column: [
    {
      label: '区号配置',
      prop: 'dynamic',
      type: 'dynamic',
      span: 24,
      children: {
        align: 'center',
        headerAlign: 'center',
        rowAdd: (done) => {
          done({
            groupValue:'area_code',
            tabValue:'区号',
          });
        },
        rowDel: (row, done) => {
          done();
        },
        column: [{
          width: 300,
          label: '国家',
          prop: "attrName"
        },
        {
          width: 400,
          label: '区号',
          prop: "attrValue",
        },
        {
          width: 400,
          label: 'groupValue',
          display:false,
          prop: "groupValue",
        },
        {
          width: 400,
          label: 'tabValue',
          display:false,
          prop: "tabValue",
        },
      ]
      }
    },

  ]
})
const handleSubmit = (form, done) => {
  if (!crudData.form.dynamic.length) {
    return ElMessage.warning('付款方式数据不能为空');

  }
  areaCodeSave(crudData.form.dynamic).then(res => {
    ElMessage.success('操作成功')
    initData()
  }).catch(err => {
  })
  done()
}
const initData = async () => {
  await htAreaCodeList().then(res => {
    crudData.form.dynamic = res.data
    console.log('ree===', res);
  })
}
onMounted(() => {
  initData()
})
</script>
<style scoped lang="scss">
.form_box {
  width: 75%;
  padding: 0 20px 20px 20px;
  height: calc(100vh - 120px);
  overflow-y: auto;

  ::v-deep .avue-form {
    .el-collapse-item__wrap {
      padding: 20px;
    }
  }
}

::v-deep .el-input-group__prepend {
  padding: 0 15px;
}
</style>
